<template >
<div>
   
    <view class="container">
      <div>
        <swiper  circular  class="goodsimgs" indicator-dots="true" autoplay="true" loop='true' interval="1800" duration="1000">
            <swiper-item v-for="(item, index) of  bannerImages" :key="item.id"   :data-index="index">
            <img  :src="item" />
            <!-- <img  :src="item.imgUrl+'?x-oss-process=image/resize,m_fill,h_750,w_750'" background-size="cover"/> -->
      
            </swiper-item>
        </swiper> 
          <div v-if="activity" class="stime">
            <p>活动价</p>
            <p><span>￥</span>{{activity.price+priceDiff}}</p>
            <p>
              <stime @timeclose="timeclose" :time='time'></stime>
            </p>
              
          </div>
         
     </div>
    <view class="service-policy">
        <view class="item">7天无理由退款</view>
        <view class="item">微信快速支付</view>
        <view class="item">满88元免邮费</view>
    </view>
       <div class="title">
                <p>{{items.productName}}</p>
                <div v-if="!activity">
                  
                    <div v-if="Noactivity"> 出厂价 <span>￥</span>{{items.price}}  </div>
                </div>
                
                <p><span>物流到付</span> <span>已售{{items.saleNum}}笔</span> <span>浙江杭州</span>  </p>
                
        </div>
     
    
        <div class='sku'>

                <div slot="title" class="guige">
                  <div class="guige-img">
                    <img :src="guige"/>
                    <div>规格选择</div>
                  </div>
                <div @click="translate()" class="gui-size">
                  <div>尺寸：<span v-for="(item, index) in items.skuSize" :key="index">{{item.sizeName}}&nbsp;</span></div>
                  <div>颜色：<span v-for="(item, index) in items.skuColor" :key="index">{{item.colorName}}&nbsp;</span></div>
                </div>
                </div>
                <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:33.5px" class="" src="/static/images/go.png"/> 
        </div>
        <div @click='openProductDetail' class="specifications">
            <span>产品参数</span>  
            <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:16.5px" class="icon iconfont" src="/static/images/go.png"/> 
        </div>
        <div class="evaluation">
           <span>商品评价(0)</span>  
           <img  style="width:8px;height:13px;margin-right:5vw;float:right;margin-top:16.5px" class="icon iconfont" src="/static/images/go.png"/> 
         </div>
        <div class="details">
          <div class="dtitle">
            <span></span><span>详情展示</span><span></span>  
          </div>
          <div class="detailsImg" >
               <img v-for="(item, index) in detailsImg" :key="index" :src="item.imgUrl+'?x-oss-process=image/resize,m_fill,h_750,w_750'"/>
          </div>
      
         
        </div>
      
        
          <div v-if='dataShow' v-show='parametersIF'   class="componentsList">

         <!-- {{parametersIF}} -->
                <parameters   :datas= "items"></parameters>
          </div>
           <!-- <div    class="componentsList">
             
          </div> -->
       
    <view class="animation-element-wrapper" :animation="animation"  >
             <sku   v-if='dataShow' @close=" close" :skuColor=[skuColor,items.skuSize,items.productName,bannerImages[0],items.productId,items.storeInfo.storeId,priceDiff,shareId,activity]   ></sku>
    </view>
 
     <div @click='close'  v-show='puShow'   class='pu'></div>

    </view>
    
 <view :style="{height:iphoneXb2}" class="bottom-btn">
    <view class="l l-collect" @click="addCannelCollect">
        <img class="icon" :src="collectBackImage"/>
    </view>
    <view class="l l-cart">
        <view class="box">
        <text class="cart-count">{{cartGoodsCount}}</text>
        <img @click="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"/>
        </view>
    </view>
      <view class="l l-cart">
        <view style="height:100%;width:100%;"  class="box">
         <button  style="height:100%;width:100%; opacity:0; position: absolute;left:0;top:0;z-index:10;" open-type="contact" /> 
        <img  style="height:24px;width:30px;margin:auto;letf:0;right:0; position: absolute;left:0px;top:12px;" src="/static/images/service.png"/>
        </view>
    </view>
    <!-- <view @click="translate(5)"  class="c">加入购物车</view> -->
    <view class="r" @click="translate()" >立即购买</view>
     <!-- @click="addToCart" -->
    </view>
    <div :style="{bottom:iphoneXbo}"></div>
</div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx';
 
import Parameters from '@/components/Parlist';
import sku from '@/components/sku';
import stime from '@/components/time';
 
var app = getApp();
var cellId;

var t = 0;
var show = false;
var moveY = 550;
export default {
  components: {
  
    Parameters,
    sku,
    stime
  },
  data () {
    return {
      time:'',
      animation:'',
      show:false,
      bannerImagesIF:false,
      iphoneXbo:'0px',
      iphoneXb2:'50px',
      timecloseIf:true, //活动时间判断
      id: 0,
      goods: {},
      gallery: [{ img_url: '' }],
      attribute: [],
      issueList: [],
      comment: [],
      brand: {},
      specificationList: [],
      productList: [],
      relatedGoods: [],
      cartGoodsCount: 0,
      userHasCollect: 0,
      number: 1,
      checkedSpecText: '请选择规格数量',
      openAttr: false,
      noCollectImage: '/static/images/icon_collect.png',
      hasCollectImage: '/static/images/icon_collect_checked.png',
      collectBackImage: '/static/images/icon_collect.png',
      goodDetailHTMLstr: '',
      detailsImg:'',
      skuColor:'',
      items:'',
      dataShow:false,
       skuIF:false,
      skuColor:'',
      or:true,
      AllCartData:'5',
      gone:false,
      puShow:'',
      detailsImg:'',
      selectList:'',
      parametersIF:false,
      items:'',
      guige:'../../static/images/guige.png',
      bannerImages:[],
      priceDiff:0,
      shareId:'',
      activity:'',
      price:'',
      Noactivity:false
    }
  },
   onShow () {
      
 
        if(this.$route.query.img){
           let quImg=this.$route.query.img.split('thumb')
               if(quImg[0]!=this.$route.query.img){
                    this.bannerImages=[quImg[0]+quImg[1]+'?x-oss-process=image/resize,m_fill,h_375,w_375']
                }else{
                   this.bannerImages=[this.$route.query.img+'?x-oss-process=image/resize,m_fill,h_375,w_375']
                }
        }
     


      this.getGoodsInfo()
      this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0, //初始动画时间
      timingFunction: "ease",
      delay: 0
    }
    )
    this.animation.translateY('550px').step();//初始隐藏
    
      this.animation=this.animation.export()
      this.show=show
    
  },
 
  
  onPullDownRefresh(){
 wx.stopPullDownRefresh();
},
  onUnload:function(){
    //监听页面卸载 销毁
    // this.bannerImagesIF=false;
    //  this.bannerImages=[];
 
    this.dataShow=false;
     
    this.puShow=false;
    this.skuColor=''
    this.items.skuSize='';
    this.items.productName='';
    this.bannerImages=[];
    this.items.productId='';
    this.items.storeInfo.storeId='';
    this.shareId='' ;
    this.priceDiff=0;
    this.activity='' ;
     this.timecloseIf=true;
    // this.parametersIF=false;
   
    // console.log("test1 onUnload");
  },
   created() {
 

 let that =this;
    console.log('js')
     wx.getSystemInfo({
      
              success: function (res) {
                // console.log(res )
            //    console.log('全局变量', app.globalData.iphoneH);
                      wx.setStorageSync('windowWidth', res.windowWidth );// 浏览器宽度
                  if (res.model == 'iPhone X (GSM+CDMA)<iPhone10,3>') {
                      //  this.iphoneXbo='68px'
                      app.globalData.iphoneH='106px'
                        that.iphoneXbo='106px'; 
                        that.iphoneXb2='106px';
                      //  console.log('全局变量', app.globalData.iphoneH);
                  }else{
                      app.globalData.iphoneH='50px';
                       that.iphoneXbo='50px'; 
                        that.iphoneXb2='50px';
                  }
              }
        })　
  },
  methods: {
   timeclose(){
     this.timecloseIf=false;
   },
      hiddenFloatView(e){
        // console.log(e);
        moveY = 550;
        this.show = true;
        t = 0;
        this.animationEvents(this,moveY, this.show);
        this.puShow=false;
      },
   translate (e) {
     
        if(this.timecloseIf==false){
        wx.showToast({
              title: '活动已结束',
              icon: 'none'
            })
      return false ;
   }
   if(this.items.price==0){
        wx.showToast({
              title: '价格不能为0元',
              icon: 'none'
            })
      return false ;
   }

     if(wx.getStorageSync('token')){

    
      // console.log(t)
    if (t == 0) {
      moveY = 0;
      this.show = false;
      t = 1;
    } else {
      moveY = 550;
      this.show = true;
      t = 0;
    }
    // this.animation.translate(arr[0], arr[1]).step();
    this.animationEvents(this,moveY, this.show);
    
    this.puShow=true;
     }else{
         wx.navigateTo({ //redirectTo
              url: '../login/login'
            })
          //        wx.navigateTo({
          //     url: '../shopping/checkout'
          //   //   /pages/shopping/checkout
          // });
     }
  },
    animationEvents(that,moveY,show){
      // console.log("moveY:" + moveY + "\nshow:" + show,'开始');
      this.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 350,
        timingFunction: "ease",
        delay: 0
      }
      )
      this.animation.translateY(moveY + 'px').step()
    },
      skuShow(){
        this.skuIF=true;
        this.puShow=true;
      },
      buycart(){},
      buyGoods(){
          this.skuIF=true;
        this.puShow=true;
      },
 
      openProductDetail(){
        this.parametersIF=true;
        this.puShow=true;
      },
    close(){
        this.parametersIF=false;
        this.puShow=false;
        this.skuIF=false;
         this.hiddenFloatView();
    },
    // 获取商品详情
    async getGoodsInfo () {
        if(this.$route.query.shareId) {
             this.shareId=this.$route.query.shareId
        }
     
     let data=JSON.stringify({"productId":this.$route.query.productId,'shareId':this.shareId})
        // shareId=46713826a3124086962ca17e2b1091b1
      const res = await api.ProductDetail({"data":data});
      // console.log('商品详情,请求结果', res);
     
      let datas=res.data
      if(this.$route.query.shareId){
              this.priceDiff=datas.priceDiff;
      }else{
        this.priceDiff=0;
      }

       
      // this.bannerImages=[datas.productImgUrl+'?x-oss-process=image/resize,m_fill,h_750,w_750'] 
        //  if(datas.images!=''){
        //      this.bannerImages=datas.images; 
        //   }
      
        if(this.bannerImages.length==0&&datas.images.length==0){
             this.bannerImages.push(datas.productImgUrl+'?x-oss-process=image/resize,m_fill,h_750,w_750')
            console.log(1)
        }else{
             for(let i=0;i<datas.images.length;i++){
                this.bannerImages.push(datas.images[i].imgUrl+'?x-oss-process=image/resize,m_fill,h_750,w_750')
              }
             
        }
         
       
          // console.log(datas.images)
          // console.log( this.bannerImages)
           this.items=datas;
                //  console.log(this.items) 
           this.items.price=this.items.price+this.priceDiff;
           if(this.$route.query.productId){

           }
          this.bannerImagesIF=true;
        // console.log(this.bannerImages,'完成')
          this.detailsImg=res.data.detail.images;
          this.skuColor=res.data.skuColor;
          

      //  console.log('刚进来',this.dataShow)
      if(datas.activity.endTime){
          let date = new Date(datas.activity.endTime.replace(/-/g, "/"));
          let time1 = date.getTime();
          this.time=time1 ;
          this.activity=datas.activity ;
          this.Noactivity=false;
       }else{
         this.time='' ;
          this.activity='' ;
          this.Noactivity=true;
       }
       this.dataShow=true;
    },
    // 获得“相关商品推荐”信息
    async getGoodsRelated () {
      const res = await api.getGoodsRelated({ id: this.id });
      // console.log('相关商品推荐', res);
      if (res.errno === 0) {
        this.relatedGoods = res.data.goodsList;
      }
    },
    // 规格弹窗中，每个规则项的点击事件
    clickSkuValue (event) {
      let specNameId = event.currentTarget.dataset.nameId;
      let specValueId = event.currentTarget.dataset.valueId;
      // 判断是否可以点击
      // TODO 性能优化，可在v-for中添加index，可以直接获取点击的属性名和属性值，不用循环
      let _specificationList = this.specificationList;
      for (let i = 0; i < _specificationList.length; i++) {
        if (_specificationList[i].specification_id === specNameId) {
          for (let j = 0; j < _specificationList[i].valueList.length; j++) {
            if (_specificationList[i].valueList[j].id === specValueId) {
              // 如果已经选中，则反选
              if (_specificationList[i].valueList[j].checked) {
                _specificationList[i].valueList[j].checked = false;
              } else {
                _specificationList[i].valueList[j].checked = true;
              }
            } else {
              _specificationList[i].valueList[j].checked = false;
            }
          }
        }
      }
      this.specificationList = _specificationList;
      // 重新计算spec改变后的信息
      this.changeSpecInfo();
      // 重新计算哪些值不可以点击
    },
    // 获取选中的规格信息,存到数组中，其他方法有3处调用
    getCheckedSpecValue () {
      let checkedValues = [];
      let _specificationList = this.specificationList;
      for (let i = 0; i < _specificationList.length; i++) {
        let _checkedObj = {
          nameId: _specificationList[i].specification_id,
          valueId: 0,
          valueText: ''
        };
        for (let j = 0; j < _specificationList[i].valueList.length; j++) {
          if (_specificationList[i].valueList[j].checked) {
            _checkedObj.valueId = _specificationList[i].valueList[j].id;
            _checkedObj.valueText = _specificationList[i].valueList[j].value;
          }
        }
        checkedValues.push(_checkedObj);
      }
      return checkedValues;
    },
    // 根据已选的值，计算其它值的状态
    setSpecValueStatus () {

    },
    // 判断规格是否选择完整(每一种至少选择一项)，加入购物车前进行判断
    isCheckedAllSpec () {
      return !this.getCheckedSpecValue().some(function (v) {
        if (v.valueId === 0) {
          return true;
        }
      });
    },
    // 拿到规格的key，库存判断时调用
    getCheckedSpecKey () {
      let checkedValue = this.getCheckedSpecValue().map(function (v) {
        return v.valueId;
      });
      // console.log('getCheckedSpecKey', checkedValue.join('_'));
      return checkedValue.join('_');
    },
    // 每次点击规格项，重新计算规格的信息
    changeSpecInfo () {
      let checkedNameValue = this.getCheckedSpecValue();
      // 设置选择的信息
      let checkedValue = checkedNameValue.filter(function (v) {
        if (v.valueId !== 0) {
          return true;
        } else {
          return false;
        }
      }).map(function (v) {
        return v.valueText;
      });
      if (checkedValue.length > 0) {
        this.checkedSpecText = checkedValue.join('　');
      } else {
        this.checkedSpecText = '请选择规格数量';
      }
    },
    // 判断库存时调用，key是计算我们选择的规则，类似1_3_7
    getCheckedProductItem (key) {
      // console.log('this.data.productList', this.data.productList);
      return this.productList.filter(function (v) {
        if (v.goods_specification_ids === key) {
          return true;
        } else {
          return false;
        }
      });
    },
    // 打开商品规格选择弹窗
    switchAttrPop () {
      if (this.openAttr === false) {
        this.openAttr = !this.openAttr;
      }
    },
    // 关闭规格弹窗
    closeAttr () {
      this.openAttr = false;
    },
    // 购物车的五角星，添加或是取消收藏
    async addCannelCollect () {
       let data=JSON.stringify({"productId":this.$route.query.productId})
      const res = await api.AddFollowProduct({"data":data});
      // console.log('添加或取消收藏', res);
      if (res.status == 0) {
        
          this.collectBackImage = this.hasCollectImage;
       
          // this.collectBackImage = this.noCollectImage;
     
      } else {
        wx.showToast({
          image: '/static/images/icon_error.png',
          title: res.errmsg,
          mask: true
        });
      }
    },

    // 跳转到购物车页面
    openCartPage () {
      wx.switchTab({
        url: '/pages/cart/cart'
      });
   
    },
    // 加入购物车，多种判断哦~
    async addToCart () {
      if (this.openAttr === false) {
        // 打开规格选择弹窗
        this.openAttr = !this.openAttr;
      } else {
        // 提示选择完整规格
        if (!this.isCheckedAllSpec()) {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: '规格选择不完整',
            mask: true
          });
          return false;
        }
        // 根据选中的规格，判断是否有对应的sku信息
        let checkedProduct = this.getCheckedProductItem(this.getCheckedSpecKey());
        // console.log('checkedProduct', checkedProduct);
        // 验证商品型号
        if (!checkedProduct || checkedProduct.length <= 0) {
          // 提示没有库存
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: '库存型号不足',
            mask: true
          });
          return false;
        }
        // 验证商品数量
        if (checkedProduct.goods_number < this.number) {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: '库存数量不足',
            mask: true
          });
          return false;
        }
        // 添加到购物车
        const res = await api.CartAdd({ goodsId: this.goods.id, number: this.number, productId: checkedProduct[0].id });
        // console.log('添加到购物车，请求结果', res);
        if (res.errno === 0) {
          wx.showToast({
            title: '添加成功'
          });
          this.openAttr = !this.openAttr;
          this.cartGoodsCount = res.data.cartTotal.goodsCount;
        } else {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: res.errmsg,
            mask: true
          });
        }
      }
    },
    // 减少数量
    cutNumber () {
      this.number = (this.number - 1 > 1) ? this.number - 1 : 1;
    },
    // 增加数量
    addNumber () {
      this.number = this.number + 1;
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: this.items.productName,
      desc: '商品详情',
      path: '/pages/goods/goods?productId='+this.$route.query.productId+'&img='+ this.$route.query.img
    }
  }
}
</script> 
 
<style lang='scss'>
@import "../../utils/wxParse/wxParse.wxss";
.fade-enter-active {
  transition: all  0.38s ease-in;
}
.fade-leave-active {
  transition: all  0.3s  ease-in;
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(400px);
 /*opacity:0;*/
}
.animation-element-wrapper {
  display: flex;  
  position: fixed;
  left: 0;
  bottom:0;
  z-index: 999;;
  width: 100%;
 
}
.componentsList
{
     bottom:0;
     left: 0;
    position: fixed;
    width:100vw;
    z-index: 99;
    background: #fff;
}
.pu{
    height: 100vh;
    width: 100vw;
    background-color:rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top:0;
    z-index: 1
}

.sku{
  margin-top: 16px;
  background: #fff;
  width: 100vw;
 padding-bottom: 16px;
  .guige-img{
    margin-top: 22px;
    padding-left: 15px;
  }
}
.stime{
  height: 44px;
  background: #FD6D1F;
  p{
    float: left;
     color: #fff;
  }
  p:nth-child(1){
    line-height: 44px;
    font-size: 12px;
    padding-left: 15px;
  }
   p:nth-child(2){
    font-size: 29px;
    padding-left: 5px;
    span{
      font-size: 12px;
    }
  }
   p:nth-child(3){
     float: right;
  }
}
.detailsImg{
  background: #fff;
  img{
    width: 100vw;
    height: 100vw;
    display: block;
  }
}
.specifications{
  line-height: 44px;
  background: #fff;
  margin-top: 16px;
  width:100vw ;
  span{
      font-size: 14px; 
      color:#333333;
      padding-left: 4vw;
  }
}
.evaluation{
  width: 100vw;
   line-height: 44px;
  background: #fff;
  margin-top: 16px;
   span{
      font-size: 14px; 
      color:#333333;
      padding-left: 4vw;
  }
}
.details{
  margin-top: 16px;
  width: 100%;
  
      img{
      width: 100%;
      display: block;
    }
  .dtitle{
    background: #fff;
    width: 90vw;
    padding: 0 5vw;
    line-height: 43px; 
    margin-bottom: 15px;
    span{
      display: inline-block;
      width: 30vw;

    }
    span:nth-child(1),span:nth-child(3){
        height: 1px;
        background:rgba(51,51,51,1);
        opacity:0.5;
    }
    span:nth-child(2){
      color: #333333;
      font-size: 14px;
 
      text-align:center;
    }

  }
}
.title{
  width: 90vw;;
  padding: 0 5vw;
  padding-top:10px;
  background: #fff;
   
  p:nth-child(1){
    color: #333333;
    font-size: 16px;
    line-height: 18px;
    height: 18px;;
  }
  div:nth-child(2){
    padding-top: 10px;
    color: #FD6D1F;
    font-size: 23px;
    height:30px;;
    span{
      font-size: 12px;
    }
  }
  p:last-child{
    padding-top: 16px;
    padding-bottom: 15px;
    font-size: 13px;
    color:rgba(51,51,51,1);
    font-size: 0;
    span{
      width: 30vw;;
      display:inline-block;
       font-size: 13px;
    }
    span:nth-child(1){
      text-align: left;
    };
     span:nth-child(2){
       text-align: center;
    };
     span:nth-child(3){
       text-align: right;
    }
  }
}
.guige{
          .guige-img{
            padding-right: 15px;
            border-right: 1px solid #999;
            font-size: 14px;
            float: left;
            img{
              width: 24px;
              height: 19px;
              margin-left: 17px;
            }
          }
        .gui-size{
          float: left;
          padding-left: 15px;
          font-size: 14px;
          margin-top: 22px;
          div{
            width: 216px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          }
        }
.instructions{
   width: 100vw;;
  padding: 0 5vw;
  margin-top:15px;
  background: #fff;
  font-size: 0;
  padding-bottom: 15px;
    p{
 
    display: inline-block;  
    font-size: 13px;
    color: #333333;
    margin-right: 8vw;
    padding-top: 15px;
    span{
          margin-right: 1.333vw;
     
          display: inline-block;
          height: 1.6vw;
          width: 1.6vw;
          border-radius: 50%;
          background: #fd6d1f;
    }
    
 }
}

 

.swiper-box {
   
    width: 100%;
    height: 100vw;;
    margin: 0 auto;
    text-align: center;
    .swiper-pagination-bullet-active{
        background-color: red;
    }
 
  }
	img{
		width: 100%;
		height: 100%;
	}
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 18px ;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }




.swiper-pagination-bullet{
  /* background-color: #fff; */
  opacity: 0.5;;
   
	width: 5px;
	height:5px;
}
.swiper-pagination-bullet-active{
   background-color: #fff;
  opacity: 1;;
}
 .bottom
  {
      width:100%;
      height: 50px;
    
      position: fixed;
      bottom:0;
      left:0;
      background:#fff;
       color:#fff;
       font-size: 16px;
      p:nth-child(1)
      {
          float: left;
          width:34vw;
          height: 50px;
          
          .icon3{
              font-size: 28px;
              color:#000
          }
          line-height: 50px;
          span
          {
              float: left;
              text-align: center;
          }
          span:nth-child(1){
              margin-left:5.4vw;
              margin-right: 5.4vw;
          }
      }
      p:nth-child(2)
      {
          width:33vw;
          float: left;
          line-height:50px;
          background-color: rgba(26,26,26,1);
           text-align:center;
      }
        p:nth-child(3)
      {
          width:33vw;
          float: left;
          line-height:50px;
          background-color: rgba(254,57,57,1);
         text-align:center;
      }
  }
.container {
  margin-bottom: 100rpx;
  background: #F5F5F5;
}

.goodsimgs {
  width: 750rpx;
  height: 750rpx;
}

.goodsimgs image {
  width: 750rpx;
  height: 750rpx;
  background-color: #eee;
}

.service-policy {
  width: 92vw;
  height: 73rpx;
  background: #f4f4f4;
  padding: 0 4vw;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.service-policy .item {
  background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
  background-size: 10rpx;
  padding-left: 15rpx;
  display: flex;
  align-items: center;
  font-size: 25rpx;
  color: #666;
}


.number-item .selnum {
  width: 322rpx;
  height: 71rpx;
  border: 1px solid #ccc;
  display: flex;
}

.number-item .cut {
  width: 93.75rpx;
  height: 100%;
  text-align: center;
  line-height: 65rpx;
}

.number-item .number {
  flex: 1;
  height: 100%;
  text-align: center;
  line-height: 68.75rpx;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  float: left;
}

.number-item .add {
  width: 93.75rpx;
  height: 100%;
  text-align: center;
  line-height: 65rpx;
}

.bottom-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 100vw;
  height: 100rpx;
  display: flex;
  background: #fff;
}

.bottom-btn .l {
  float: left;
  height: 100rpx;
  width: 60px;
  border: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-btn .l.l-collect {
  border-right: none;
  border-left: none;
  text-align: center;
}

.bottom-btn .l.l-cart .box {
  position: relative;
  height: 60rpx;
  width: 60rpx;
 
}

.bottom-btn .l.l-cart .cart-count {
  height: 28rpx;
  width: 28rpx;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  background: #b4282d;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  line-height: 28rpx;
  border-radius: 50%;
}

.bottom-btn .l.l-cart .icon {
  position: absolute;
  top: 10rpx;
  left: 0;
}

.bottom-btn .l .icon {
  display: block;
  height: 44rpx;
  width: 44rpx;
}

.bottom-btn .c {
  float: left;
  height: 100rpx;
  line-height: 96rpx;
  flex: 1;
  text-align: center;
  color: #333;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

.bottom-btn .r {
  border: 1px solid #FB3232;
  background: #FB3232;
  float: left;
  height: 100rpx;
  line-height: 96rpx;
  flex: 1;
  text-align: center;
  color: #fff;
}

</style>
